<template>
	<view class="">
		<bolck v-for="(item,index) in list">
			<view class="work_item" :key="index">
				<view class="work_userInfo">
					<image class="work_userInfo_img" :src="item.avatar"></image>
					<view>
						<view class="work_userInfo_info">
							<view>{{item.customer_title}}</view>
							<view class="work_userInfo_info_phone">
								<image src="/static/images/icon_phone.png"></image>
								<text>{{item.customer_mobile}}</text>
							</view>
						</view>
						<view class="work_userInfo_time">
							{{item.create_at}}
						</view>
					</view>
					<view class="work_userInfo_laber color_blue">{{item.status}}</view>
				</view>
				<view class="work_userInfo_type">
					<view class="work_userInfo_type_item">
						<text>工单类型：</text>
						<text>{{item.type}}</text>
					</view>
					<view class="work_userInfo_type_item">
						<text>负责人：</text>
						<text>{{item.exec_user}}</text>
					</view>
				</view>
				<view class="work_userInfo_addr">
					<text>地址：</text>
					<text>{{item.province}}{{item.city}}{{item.area}}{{item.address}}</text>
				</view>
				<view class="work_userInfo_content">
					<text>派工内容：</text>
					<text>{{item.content}}</text>
				</view>
			</view>
		</bolck>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../../../components/loading/loading.vue"
	export default{
		components:{
			Loading
		},
		data(){
			return{
				list:[],
				id: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData()
		},
		methods:{
			getData(){
				// this.$refs.load.initLoading({loadType:1,loadPrompt:false}).then(res =>{
				// 	this.$api.getWorkDetail({customer_id: this.id}).then(res => {
				// 		console.log(res)
						
				// 		this.list = res
				// 		this.$refs.load.getLoadingData({})
				// 	})
				// })
				this.$api.getWorkList({customer_id: this.id}).then((res) => {
					console.log(res)
					this.list = res.data
					
				})
			}
		}
	}
</script>

<style>
	.work_item{
		width: 690upx;
		background: #FFFFFF;
		margin: 30upx 0 0 30upx;
		padding: 30upx;
		box-sizing: border-box;
	}
	.work_userInfo{width: 100%;display: flex;flex-direction: row;align-items: center;font-size: 30upx;color: #333333;}
	.work_userInfo_img{width: 70upx;height: 70upx;background: #EEEEEE;border-radius: 50%;margin-right: 20upx;}
	.work_userInfo_info{width: 100%;display: flex;flex-direction: row;align-items: center;}
	.work_userInfo_info_phone{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 40upx;
		margin-top: -32rpx;
	}
	.work_userInfo_info_phone image{width: 26upx;height: 26upx;margin-right: 10upx;}
	.work_userInfo_time{font-size: 24upx;color: #9BA7B7;margin-top: 5upx;}
	.work_userInfo_laber{
		margin-left: auto;
		font-size: 28rpx;
		min-width: 140rpx;
		margin-left: auto;
		font-size: 28rpx;
		width: 140rpx;
		margin-top: -70rpx;
		padding-left: 20rpx;
	}
	.work_userInfo_type{font-size: 26upx;margin-top: 30upx;display: flex;flex-direction: row;color: #9BA7B7;}
	.work_userInfo_type_item:nth-child(2){margin-left: 40upx;}
	.work_userInfo_type_item text:nth-child(2),.work_userInfo_addr text:nth-child(2),.work_userInfo_content text:nth-child(2){color: #333333;}
	.work_userInfo_addr{font-size: 26upx;color:#9BA7B7;margin: 10upx 0 30upx 0;}
	.work_userInfo_content{padding-top: 30upx;border-top: 2upx solid #EEEEEE;font-size: 28upx;color: #9BA7B7;}
</style>
